<template>
    <div class="payBook">

        <div class="buttomBox">
            <div @click="handleBack">{{ $t('assemble.返回') }}</div>
            <van-button type="info" @click="handleDown">{{ $t('assemble.下载付款通知书') }}</van-button>
        </div>


        <div class="paybox" id="paybox">

            <div class="logo">
                <div class="logobox">
                    <img class="logoimg" src="../../static/imgs/paylogo.png" alt="">
                    <p style="line-height: 15px;">{{ $t('assemble.上海茂侨实业有限公司') }}</p>
                    <p style="line-height: 15px;">Shanghai M.Q.CO.,Ltd</p>
                    <p style="line-height: 15px;">support@spsol.cn</p>
                </div>
            </div>

            <div class="title">
                {{ $t('assemble.付款通知单') }}
            </div>


            <!-- 收货人信息 -->
            <div class="consignee">
                <p>{{ $t('assemble.至') }}:<span style="margin-left: 20px;">{{ dataList.invoice_name }}</span></p>
                <!-- <p>收件人: <span style="margin-left: 20px;">{{ dataList.invoicesite.name }}</span></p> -->
                <p>{{ $t('assemble.邮箱地址') }}:<span style="margin-left: 20px;">{{ userData.companyemail }}</span></p>
                <p>{{ $t('assemble.电话') }} :<span style="margin-left: 20px;">{{ userData.phone }}</span></p>
            </div>


            <!-- 商品信息 -->
            <div class="productdata">
                <div class="title" style="font-weight: 500;margin: 30px;">
                    {{ $t('assemble.商品详情') }}
                </div>
                <div class="productdataItem">
                    <div class="lable">{{ $t('assemble.订单编号') }}:</div>
                    <div class="value">
                        {{ dataList.number }}
                    </div>
                </div>
                <div class="productdataItem">
                    <div class="lable">{{ $t('assemble.商品名称') }}:</div>
                    <div class="value">
                        {{ dataList.name }}
                    </div>
                </div>
                <div class="productdataItem">
                    <div class="lable">{{ $t('assemble.授权渠道') }}:</div>
                    <div class="value">
                        {{ dataList.bazaar }}
                    </div>
                </div>
                <div class="productdataItem">
                    <div class="lable">{{ $t('assemble.价格') }}:</div>
                    <div class="value">
                        {{ dataList.price }}
                    </div>
                </div>
                <div class="productdataItem">
                    <div class="lable">{{ $t('assemble.数量') }}:</div>
                    <div class="value">
                        {{ dataList.num }}
                    </div>
                </div>
                <div class="productdataItem">
                    <div class="lable">{{ $t('assemble.共计') }}:</div>
                    <div class="value">
                        {{ sumNum }}
                    </div>
                </div>
                <div class="productdataItem">
                    <div class="lable">{{ $t('assemble.总计') }}:</div>
                    <div class="value">
                        <span v-if="dataList.user_area_id != '中国大陆'">CNY</span>
                        {{ sumNum }}
                    </div>
                </div>

            </div>

            <div class="consigneemessage">
                <div class="consigneemessagebox">
                    <div>{{ $t('assemble.收件人的公司名称') }}:</div>
                    <div style="margin-left: 10px;"> {{ dataList.delivery.company }}</div>
                </div>
                <div class="consigneemessagebox">
                    <div>{{ $t('assemble.收件人的姓名') }}:</div>
                    <div style="margin-left: 10px;">{{ dataList.delivery.name }}</div>
                </div>
                <div class="consigneemessagebox">
                    <div>{{ $t('assemble.收件人的联系电话') }}:</div>
                    <div style="margin-left: 10px;">{{ dataList.delivery.mobile }}</div>
                </div>
                <div class="consigneemessagebox">
                    <div>{{ $t('assemble.收货地址') }}:</div>
                    <div style="margin-left: 10px;">{{ dataList.delivery.site }}</div>
                </div>
                <div class="consigneemessagebox">
                    <div>{{ $t('assemble.邮政编码') }}:</div>
                    <div style="margin-left: 10px;">{{ dataList.delivery.postcode }}</div>
                </div>
            </div>

            <div class="heng"></div>

            <div class="payee" >
                <p>{{ $t('assemble.支付方法银行转帐') }}</p>
                <p>{{ $t('assemble.送货在确实收到货款起计的7个工作天内安排将订购的货品送出') }}</p>
                <p>{{ $t('assemble.工作日星期一至星期五的上午9时30分至下午5时30分法定假期除外') }}</p>
                <p>{{ $t('assemble.付款请按本通知单的总金额存入以下的银行账户') }}</p>
                <div v-if="dataList.user_area_id == '中国大陆'">
                    <p style="margin-left: 60px;">{{ $t('assemble.收款银行名称中国建设银行上海市白鶴支行') }}</p>
                    <p style="margin-left: 60px;">{{ $t('assemble.账户号码') }}</p>
                    <p style="margin-left: 60px;">{{ $t('assemble.收款人名称上海茂侨实业有限公司') }}</p>
                    <p style="margin-left: 60px;">{{ $t('assemble.联行号') }}</p>
                    <p>{{ $t('assemble.此通知单仅作付款通知不可用于财务入帐电子版增值稅发票会于15个工作日内寄达订单所留的邮箱') }}</p>

                </div>
                <div v-else>
                    <p style="margin-left: 60px;">{{ $t('assemble.按当天中间汇率换算成美元') }}</p>
                    <p style="margin-left: 60px;"> Name of bank: China construction bank corporation </p>
                    <p style="margin-left: 165px;">Shanghai branch Shanghai Yangtze River </p>
                    <p style="margin-left: 165px;">Delta Integration Demonstration Zone Sub-branch；</p>
                    <p style="margin-left: 60px;">Account number：3105 0183 4100 0000 1451 </p>
                    <p style="margin-left: 60px;"> Account name： Shanghai MaoQiao Industrial Co., Ltd.</p>
                    <p style="margin-left: 60px;"> Swift code: PCBCCNBJSHX </p>
                    <p>{{ $t('assemble.此通知单仅作付款通知不可用于财务入帐商业发票会于15个工作日内寄达订单所留的邮箱') }}</p>
                </div>

            </div>





        </div>


    </div>
</template>
<script>
import htmlToPdf from '../../utils/htmltopdf';

export default {
    components: {

    },
    data() {
        return {
            content: "",
            lang: 'zh',
            tableData: [],
            dataList: [],
            userData: {},
            sumNum: 0,

        }
    },
    created() {
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')

    },
    mounted() {
        this.userData = JSON.parse(localStorage.getItem("userData"))
        this.dataList = JSON.parse(localStorage.getItem("dataAll"))
        this.dataList.num = this.dataList.num.replace(/,/g, '')
        this.sumNum = this.dataList.price * this.dataList.num
        this.sumNum = this.numberToCurrencyNo(this.sumNum)
        this.dataList.num = this.numberToCurrencyNo(this.dataList.num)
    },
    methods: {
        numberToCurrencyNo(value) {
            if (!value) return 0
            // 获取整数部分
            const intPart = Math.trunc(value)
            // 整数部分处理，增加,
            const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            // 预定义小数部分
            let floatPart = ''
            // 将数值截取为小数部分和整数部分
            const valueArray = value.toString().split('.')
            if (valueArray.length === 2) { // 有小数部分
                floatPart = valueArray[1].toString() // 取得小数部分
                return intPartFormat + '.' + floatPart
            }
            return intPartFormat + floatPart
        },

        handleDown() {
            htmlToPdf.downloadPDF(document.querySelector('#paybox'), '付款通知书');
        },

        handleBack(){
            this.$router.back(1)
        },

    },

}
</script>

<style scoped lang="scss">
@media screen and (max-width: 750px) {
    .buttomBox {
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .paybox {
        width: 100%;
        padding: 30px;
        padding-top: 0;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 30px;

        .logobox {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 16px;

            .logoimg {
                width: 200px;
                margin-left: -23px;

            }
        }

        .title {
            font-size: 16px;
            font-weight: bold;
            margin: 0 auto;
            width: 100%;
            text-align: center;
        }

        .consignee {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 16px;
        }

        .productdata {
            .productdataItem {
                display: flex;
                align-items: center;

                .lable {
                    margin-right: 20px;
                }

                .value {
                    font-weight: 500;
                }
            }
        }

        .consigneemessage {
            font-size: 14px;
            margin-top: 30px;

            .consigneemessagebox {
                display: flex;
            }
        }

        .heng {
            width: 90%;
            height: 1px;
            background-color: #EDEDED;
            margin: 30px auto;
        }
    }
}

@media screen and (min-width: 751px) and (max-width: 1300px) {
    .buttomBox {
        width: 100%;
        padding: 60px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .paybox {
        width: 100%;
        padding: 60px;
        padding-top: 0;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #333333;
        line-height: 35px;

        .logobox {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20px;
            color: #333333;
            line-height: 25px;

            .logoimg {
                width: 400px;
                margin-left: -46px;

            }
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            margin: 0 auto;
            width: 100%;
            text-align: center;
        }

        .consignee {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20px;
            color: #333333;
            line-height: 16px;
        }

        .productdata {
            .productdataItem {
                display: flex;
                align-items: center;

                .lable {
                    margin-right: 20px;
                }

                .value {
                    font-weight: 500;
                }
            }
        }

        .consigneemessage {
            font-size: 20px;
            margin-top: 50px;

            .consigneemessagebox {
                display: flex;
            }
        }

        .heng {
            width: 90%;
            height: 1px;
            background-color: #EDEDED;
            margin: 60px auto;
        }
    }
}
</style>